<template>
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '200px'">
        <el-menu class="aside-menu" text-color="#fff" active-text-color="#70c8ff" :collapse="isCollapse"
            :collapse-transition="false" :router="true">
            <!-- 用户信息 -->
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <p style="color: #ffffff" v-if="!isCollapse">只因乐太美</p>
            <p style="color: #ffffff" v-if="isCollapse">ikun</p>
            <div class="toggle-button" @click="toggleCollapse()" v-if="!isCollapse">||||||</div>
            <div class="toggle-button" @click="toggleCollapse()" v-if="isCollapse">》</div>
            <!-- 导航 -->
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-headset" style="color: white"></i>
                    <span>发现音乐</span>
                </template>
                <el-menu-item :index="'/homemain'">主页</el-menu-item>
                <el-menu-item :index="'/homerecommend'">推荐</el-menu-item>
                <el-menu-item :index="'/FMself'">私人FM</el-menu-item>
            </el-submenu>
            <el-submenu index="2" v-if="islogin">
                <template slot="title">
                    <i class="el-icon-folder-opened" style="color: white"></i>
                    <span>我的歌单</span>
                </template>
                <el-menu-item :index="'/songlove'">喜欢</el-menu-item>
                <el-menu-item :index="'/listcollection'">收藏</el-menu-item>
                <el-menu-item :index="'/listlate'">最近播放</el-menu-item>
            </el-submenu>
            <el-submenu index="3" v-if="islogin">
                <template slot="title">
                    <i class="el-icon-user" style="color: white"></i>
                    <span>个人信息</span>
                </template>
                <el-menu-item :index="'/homeinfo'">我的主页</el-menu-item>
                <el-menu-item :index="'/homeself'">我的信息</el-menu-item>
                <el-menu-item :index="'/homefollow'">关注列表</el-menu-item>
            </el-submenu>
            <!-- <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-location" style="color: white"></i>
                    <span>其他</span>
                </template>
                <el-menu-item index="4-1" disabled>选项1</el-menu-item>
                <el-menu-item index="4-2">选项2</el-menu-item>
                <el-menu-item index="4-3">选项3</el-menu-item>
            </el-submenu> -->
        </el-menu>
    </el-aside>
</template>
<script>
export default {
    name: "CommonAside",
    components: {},
    data() {
        return {
            isCollapse: false,
            islogin: window.localStorage.getItem("token"),
            username: window.sessionStorage.getItem('user'),
        };
    },
    methods: {
        //点击按钮，切换菜单的折叠与展开
        toggleCollapse() {
            this.isCollapse = !this.isCollapse;
        },
    }
}
</script>
<style scoped>
.el-aside {
    text-align: center;
    height: 100vh;
    background-color: #5a8cbb;
}

.aside-menu {
    background: #5a8cbb;
    height: 100vh;
    box-shadow: inset -8px -8px 16px #2d465e, inset 8px 8px 16px #87d2ff;
}

.el-menu {
    border-right-width: 0px;
    border-right-style: solid;
}

.el-menu-item {
    background-color: #4e7ca1;
    box-shadow: inset 7px 7px 14px #24384b, inset -7px -7px 14px #90e0ff;
}

.toggle-button {
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
</style>